<template>
  <div class="list">
    <div class="pager-title">{{$route.meta.title}}</div>
    <el-table
      :data="tableData"
      v-loading="isLoading"
      @sort-change="sortList"
      style="width: 100%; margin-top: 15px;">
      <el-table-column
        align="center"
        prop="user_name"
        sortable="custom"
        label="用户名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        sortable="custom"
        label="姓名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="bank_name"
        sortable="custom"
        label="银行名称">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        prop="bank_address"
        label="银行地址">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        prop="bank_number"
        label="银行账号">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        prop="bank_phone"
        label="预留电话">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
        align="center"
        width="210px"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" :disabled="scope.row.status !== '待审核'" @click="validateClient(scope.row, '通过审核')">审核通过</el-button>
          <el-button size="mini" type="danger" :disabled="scope.row.status !== '待审核'" @click="validateClient(scope.row, '审核驳回')">审核驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
import tableMixin from '@/common/mixins/tableData'
export default {
  name: 'list',
  mixins: [tableMixin],
  data() {
    return {
      listApi: '/company/personal-correct/get'
    }
  },
  methods: {
    validateClient(row, status) {
      if (status === '通过审核') {
        this.$confirm('确认通过？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.$http.put(`/company/personal-correct/verify/${row.id}`, {
            status,
            remark: value
          }).then(res => {
            if (res.status === 1) {
              this.$message.success('审核成功')
              this.fetchData()
            }
          })
        })
      } else {
        this.$prompt('请输入原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.$http.put(`/company/personal-correct/verify/${row.id}`, {
            status,
            remark: value
          }).then(res => {
            if (res.status === 1) {
              this.$message.success('审核成功')
              this.fetchData()
            }
          })
        })
      }
    }
  }
}
</script>